<template>
  <div>
    <Panel>
      <span slot="title">管理员信息</span>
      <div slot="main">
        <div>管理员ID：{{ user.id }}</div>
        <el-divider></el-divider>
        <div>账号：{{ user.account }}</div>
        <el-divider></el-divider>
        <div>用户组：{{ user.userGroup }}</div>
        <el-divider></el-divider>
        <div>创建时间：{{ user.ctime | normalDate }}</div>
        <el-divider></el-divider>
        <div class="main-i">
          管理员头像：
          <el-upload
            class="avatar-uploader"
            action="http://sell.h5.itsource.cn:8087/users/avatar_upload"
            :show-file-list="false"
            :on-success="handleAvatarSuccess"
            :before-upload="beforeAvatarUpload"
          >
            <img v-if="user.imgUrl" :src="user.imgUrl" class="avatar" />
            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
          </el-upload>
        </div>
      </div>
    </Panel>
  </div>
</template>

<script>
import Panel from "@/components/panel.vue";
import { mapState } from "vuex";
import { avatApi } from "@/api/user";
export default {
  components: {
    Panel,
  },
  data() {
    return {};
  },

  computed: {
    ...mapState(["user"]),
  },
  methods: {
    async handleAvatarSuccess(file) {
      if (file.code == 0) {
        this.$store.commit("SET_userMut", {
          ...this.$store.state.user,
          imgUrl: file.imgUrl,
        });
        let res = await avatApi({ imgUrl: file.imgUrl });
      }
    },

    beforeAvatarUpload(file) {
      const isJPG = file.type === "image/jpeg";
      const isLt2M = file.size / 1024 / 1024 < 2;

      if (!isJPG) {
        this.$message.error("上传头像图片只能是 JPG 格式!");
      }
      if (!isLt2M) {
        this.$message.error("上传头像图片大小不能超过 2MB!");
      }
      return isJPG && isLt2M;
    },
  },
};
</script>

<style lang="less" scoped>
.el-avatar--square {
  vertical-align: middle;
  margin-left: 20px;
}

.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.avatar-uploader .el-upload:hover {
  border-color: #409eff;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 100px;
  height: 100px;
  line-height: 100px;
  text-align: center;
}
.avatar {
  width: 100px;
  height: 100px;
  display: block;
}
.main-i {
  display: flex;
}
</style>